<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
 	<!-- jquery高版本 -->
	<script src="${_root}/resources/js/jquery-3.2.1.js"></script>
  <script type="application/javascript">
  	$jq3=jQuery.noConflict();
  	console.log("$jq3的version:"+$jq3().jquery);
  </script>
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="${_root}/resources/t2/stylesheets/theme.css">
    <link rel="stylesheet" type="text/css" href="${_root}/resources/t2/stylesheets/premium.css">
	<link rel="stylesheet" type="text/css" href="${_root}/resources/css/jquery.tmailsilder.v2.css" />
	<link rel="stylesheet" href="${_root}/resources/t2/lib/font-awesome/css/font-awesome.css">
	<!--文件上传插件-->
	<link rel="stylesheet" href="${_root}/resources/css/fileinput.min.css" />
	<style type="text/css">
		#id{
			background-color: red;
		}
	</style>
</head>
<body class="theme-blue">
	<%@include file="/WEB-INF/jsp/common/top.jsp" %>
	<div class="sidebar-nav">
			<ul class="nav nav-pills nav-stacked">
			  <li role="presentation"  ><a href="${_root}/jsp/person">个人信息</a></li>
			  <li role="presentation" ><a href="${_root}/article/uparticle">上传文章</a></li>
			  <li role="presentation" class="active"><a href="${_root}/jsp/collection">收藏的文章</a></li>
			  <li role="presentation"><a href="${_root}/jsp/articlemanager">文章管理</a></li>
			</ul>
	</div>
	<div class="content container-fluid" style="margin-top:50px;">
		<div class="row clearfix">
		<div class="col-md-3 column" height="1800px">
			<%@include file="/WEB-INF/html/ztree/usermetro.html"%>
		</div>
		<div class="col-md-9 column">
			<div class="header">

				<h1 class="page-title">收藏列表</h1>
				<ul class="breadcrumb">
					<li>
						<a href="index.html">收藏管理</a>
					</li>
					<li class="active">收藏列表</li>
				</ul>

			</div>
			<div class="main-content">
				<table id="showtable" class="table">
					<thead>
						<tr>
							<th>标题</th>
							<th>作者</th>
							<th>内容介绍</th>
							<th>日期</th>
							<!--style="width: 3.5em;"-->
							<th>用户操作</th>							
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
				<div class="row">
					<div class="col-sm-9 main-content">
						<div id="blog-posts">
						</div>
					<div id="pager" class="center-block">
						<ul class="pagination">
						</ul>
					</div>	
				</div>	
				<!--消息提醒的模态框-->
				<div class="modal small fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								<h3 id="myModalLabel">删除消息</h3>
							</div>
							<div class="modal-body">
								<p class="error-text"><i class="fa fa-warning modal-icon"></i>你确认要删除该文章吗？<br>该操作无法撤销</p>
							</div>
							<div class="modal-footer">
								<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">取消</button>
								<button class="btn btn-danger"  id='deleteUser'>删除</button>
							</div>
						</div>
					</div>
				</div>
		</div>
	</div>
	</div>

	<!-- 底部资源 -->
	  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.js"></script>
	<%@include file="/WEB-INF/jsp/common/buttom_resources.jsp"%>
	<script type="text/javascript" src="${_root}/resources/js/jsp/collection.js"></script>
	<script type="text/javascript">
		//全局数据
		const globalData={
			url:"${_root}/coll/collList",
			current:1,//当前页
			size:10,//每页大小
			totals:0,//总记录数
			pages:1,//总页数
			typeID:0 //类型ID 
		};
			$(function(){
				//定义table显示数据的模板
				const template="<tr data-uid='\${id}'>"+
				"<td>\${title}</td>"+
				"<td>\${authorInfo.name}</td>"+
				"<td>\${introduction}</td>"+
				"<td>\${tdate}</td>"+
				"<td><a href=\"#myModal\" role=\"button\" data-toggle=\"modal\" data-uid='\${id}' ><i class=\"fa fa-trash-o\"></i></a></td>"+
				"</tr>";
				$.template("list",template);//注册模板
				getServerData(globalData.url,globalData.current,globalData.size);//获取服务器数据
				//消息模态框展示时触发事件
				$('#myModal').on('show.bs.modal', function (event) {
					 var button = $(event.relatedTarget);//获取触发按钮
					 var uid=button.data('uid');//获取用户id
					 $('#deleteUser').data('uid',uid);//为模态框删除按钮添加数据
				});
				//为删除按钮添加事件处理,
				$('#deleteUser').bind('click',function(){
					var uid=$(this).data('uid');
					const baseUrl="/cms/coll/deleteColl";
					const setting={
							type:'POST',
							dataType:'json',
							data:{'articleID':uid},
							success:function(){
								$('#myModal').modal('hide');//隐藏模态框
								console.log('删除成功');
								globalData.url = "/cms/coll/collList"
								getServerData(globalData.url,globalData.current,globalData.size,globalData.typeID);//刷新页面数据
							},
							error:function(){
								$('#myModal').modal('hide');//隐藏模态框
								console.log('未知错误');
								globalData.url = "/cms/coll/collList"
							}
					};
					$.ajax(baseUrl,setting);
				});
			});
			
		</script>
		<!-- 自定义js代码 -->
</body>
</html>